<template>
    <div>
        <!-- <van-row type="flex" justify="space-between">
            <van-row type="flex" align="bottom" justify="space-around"  v-for="item in menus" :key="item.id">
                <van-col span="16" style="font-size:12px;">
                    <van-icon :name="item.icon" size="25" color="#909399"/>
                    {{ item.name }}
                </van-col>
            </van-row>
        </van-row> -->

        <!-- <van-grid clickable :border="false" icon-size="24px">
            <van-grid-item v-for="item in menus"  :key="item.id"  :to="item.path" @click="handleActive">
                    <van-icon :name="item.icon" :color="item.color" size="30" />
                    <span class="title" :style="{color:item.color}">{{ item.name }}</span>    
            </van-grid-item>
        </van-grid> -->

        <van-tabbar route fixed active-color="#FA436A" inactive-color="#909399">
            <van-tabbar-item  v-for="item in menus"  :key="item.id"  
            :to="item.path" :icon="item.icon">
                {{ item.name }}
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
export default {
   data() {
      return {
        menus:[
            {id:1,name:"首页",path:"/home",icon:"wap-home-o"},
            {id:2,name:"分类",path:"/category",icon:"apps-o"},
            {id:3,name:"购物车",path:"/cart",icon:"cart"},
            {id:4,name:"我的",path:"/user",icon:"manager"},
        ]
      }
   },
   created(){
        this.menus.map(item =>{
            if(item.path == this.$route.path){
                item.color = "#FA436A"
            }
        })
   },
   computed:{
   },
   methods:{
        handleActive(){
            setTimeout(() => {
                this.$router.go(0)
            }, 10);
        }   
   },
}
</script>
<style scoped>
    .title{
        font-size: 14px;
    }
</style>
